<template>
	<view class="my-add-path">

		<view class="path-item">
			<view>收 件 人</view>
			<input type="text" v-model="pathObj.name" placeholder="收件人姓名" />
		</view>

		<view class="path-item">
			<view>手 机 号</view>
			<input type="text" v-model="pathObj.phone" placeholder="11位手机号" />
		</view>

		<view class="path-item">
			<view>所在地区</view>
			<view @tap="showCityPicker">
				<span v-if="!pathObj.city">请选择></span>
				<span>{{ pathObj.city }} </span>

			</view>
			<mpvue-city-picker ref="mpvueCityPickerRef" :pickerValueDefault="pickerValueDefault"
				@onConfirm="onConfirm"></mpvue-city-picker>
		</view>

		<view class="path-item">
			<view>详细地址</view>
			<input type="text" v-model="pathObj.detail" placeholder="5到60个字符" />
		</view>

		<view class="path-item">
			<view>设为默认地址</view>
			<radio-group name="" @change="radioChange()">
				<label class="radio">
					<radio color="#FF3333" :checked="pathObj.state == 1" /><text></text>
				</label>
			</radio-group>
		</view>

	</view>
</template>

<script  setup lang="ts">
import { onLoad, onNavigationBarButtonTap } from '@dcloudio/uni-app';
import { ref, reactive, toRefs } from 'vue'
import mpvueCityPicker from "./mpvueCityPicker.vue";
import { useHomeStore } from '../../store/counter'
import { addressListOneApi, addressPutApi, addressAddApi } from '../../https/http'

const mainStore = useHomeStore()

const mpvueCityPickerRef = ref<InstanceType<typeof mpvueCityPicker>>();
const data = reactive<{
	pickerValueDefault: number[]
	pathObj: {
		username: string,
		name: string,
		phone: string,
		city: string
		detail: string
		state: number
		id?: number
	},
	isStatus: boolean
	user: string,
	id: number
}>({
	user: "",
	pickerValueDefault: [0, 0, 1],
	pathObj: {
		id: 0,
		username: "",
		name: "",
		phone: "",
		city: "",
		detail: "",
		state: 2,
	},
	//是否修改的状态
	isStatus: false,
	id: 0
})
onLoad((e: any) => {
	try {
		data.user = uni.getStorageSync('d_usern');
	} catch (e) {
		// error
	}
	if (e.u_id) {
		data.id = e.u_id
		uni.setNavigationBarTitle({
			title: "修改地址"
		})
		data.isStatus = true
		newData()
	} else {
		data.pathObj.username = data.user
		data.isStatus = false
	}
})

const newData = async () => {
	const res = await addressListOneApi(data.user, data.id)
	if (res.code == 200) {
		data.pathObj = res.data
	}
}
const showCityPicker = () => {
	mpvueCityPickerRef.value?.show()
}
const onConfirm = (e: any) => {
	data.pathObj.city = e.label;
	console.log(e.label);

}
onNavigationBarButtonTap(() => {
	if (data.isStatus) {
		//修改
		xg()

	} else {
		//新增
		add()
	}
})
const xg = async () => {
	const res = await addressPutApi(data.user, data.id, data.pathObj)
	if (res.code == 200) {
		uni.navigateTo({
			url: '/pages/my-path-list/my-path-list'
		})
	}
}
const add = async () => {
	const res = await addressAddApi(data.user, data.id, data.pathObj)
	if (res.code == 200) {
		uni.navigateTo({
			url: '/pages/my-path-list/my-path-list'
		})
	}
}
const radioChange = () => {
	if (data.pathObj.state == 1) {
		data.pathObj.state = 2
	} else {
		data.pathObj.state = 1
	}
}
const { pathObj, pickerValueDefault } = toRefs(data)
</script>

<style scoped>
.my-add-path {
	padding-left: 20rpx;
}

.path-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16rpx 0;
	width: 100%;
	border-bottom: 2rpx solid #CCCCCC;
}

.path-item input {
	flex: 1;
	text-align: left;
	padding-left: 10rpx;
}
</style>
